<template>
  <div>
    <van-nav-bar
      title="锦州自助洗车"
      left-text="首页"
      @click-left="onClickLeft"
      right-text="注册" @click-right="onClickRight"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/banner.png" alt="" srcset="" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <div></div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="parmes.mobile"
        name="手机号"
        label="手机号"
        type="tel"
        maxlength="11"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="parmes.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        maxlength="25"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        class="field-yzm"
        v-model="parmes.captcha"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <img
            style="width: 82px; height: 26px;"
            :src="captchaPath"
            @click="getCaptcha()"
          />
        </template>
      </van-field>
      <div style="margin: 16px; text-align: center">
        <van-checkbox class="checkbox-zi" icon-size="16px" v-model="checked" style="font-size: 14px;display: inline;">记住账号</van-checkbox>
      </div>
      <div style="margin: 16px">
        <van-button block round type="info" native-type="submit"
          >登录</van-button
        >
      </div>
      <div style="margin: 16px">
        <van-button block round type="info" @click="onClickRight"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import base from "../api/base";
export default {
  data() {
    return {
      parmes: {
        uuid: "",
        mobile: localStorage.getItem("mobileChecked") ? localStorage.getItem("mobile") : '',
        password: localStorage.getItem("mobileChecked") ? localStorage.getItem("password") : '',
        captcha: "",
      },
      captchaPath: "",
      checked: localStorage.getItem("mobileChecked") ? localStorage.getItem("mobileChecked") : false,
    };
  },
  watch: {
    parmes: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        if (val.mobile) {
          if (this.checked) {
            localStorage.setItem("mobile", val.mobile);
            localStorage.setItem("password", val.password);
            localStorage.setItem("mobileChecked", this.checked);
          }
        }
      },
      deep: true,
    },
    checked(val, oldVal) {
      if (val) {
        localStorage.setItem("mobile", this.parmes.mobile);
        localStorage.setItem("password", this.parmes.password);
        localStorage.setItem("mobileChecked", this.checked);
      }else{
        localStorage.removeItem('mobile')
        localStorage.removeItem('password')
        localStorage.removeItem('mobileChecked')
      }
    },
  },
  mounted() {
    this.getCaptcha();
    // if (localStorage.getItem("mobileChecked")) {
    //   this.parmes.mobile = localStorage.getItem("mobile");
    // }
  },
  methods: {
    // 获取uuid
    getUUID() {
      return "xxxxxxxx-xxxx-5xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
        return (c === "x"
          ? (Math.random() * 16) | 0
          : "r&0x3" | "0x8"
        ).toString(16);
      });
    },
    // 获取验证码
    getCaptcha() {
      this.parmes.uuid = this.getUUID();
      let qrCodeUrl = `${base.sq}/asxc/captcha.jpg?uuid=${this.parmes.uuid}`; // 要请求的接口地址
      let xhr = new XMLHttpRequest();
      xhr.open("GET", qrCodeUrl, true);
      xhr.responseType = "blob"; // 关键的一步
      let that = this;
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            let blob = this.response;
            // 将blob转化为base64形式
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
              let base64data = reader.result; // 这里base64data就是请求到的图片的base64码
              that.captchaPath = base64data;
            };
          }
        }
      };
      xhr.send();
    },
    // 登录
    onSubmit() {
      this.$api.loginApi(this.parmes).then((resp) => {
        if (resp.code == 0) {
          this.$toast("登录成功");
          localStorage.setItem("token", resp.token);
          this.$router.push({
            name: "index",
          });
        } else {
          this.$toast(resp.msg);
          this.getCaptcha();
        }
      });
    },
    onClickRight() {
      this.$router.push({
        name: "registered",
      });
    },
    onClickLeft() {
      this.$router.push({
        name: "index",
      });
    },
  },
};
</script>
